<template>
  <div class="app-container">
      <div class="filter-container">
        
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="角色">
        <template slot-scope="scope">
          <span>{{ scope.row.userRole | parseUserRole }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="活动">
        <template slot-scope="scope">
          <span>{{ scope.row.activityType | parseActivityType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="说明">
        <template slot-scope="scope">
          <span>{{scope.row.describe}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="图片">
        <template slot-scope="scope">
          <span v-if="scope.row.pictrues.length>0">
              <el-image :src="item" v-for="(item,index) in scope.row.pictrues" :key="index" 
                :preview-src-list="scope.row.pictruesLarge" style="width:60px;height:60px; border-radius:3px;">
            </el-image>
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="操作">
        <template slot-scope="scope">
          <span v-if="btnArbitrateShowState(scope.row.activityType)">
            <el-button type="primary" @click="showArbitrateExt(scope.row.id)">补充资料</el-button>
          </span>
        </template>
      </el-table-column>
      
    </el-table>

    <el-dialog title="仲裁资料补充" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item hauto">
            <span class="name">用户</span>
            <span class="value">
                <table style="width:100%" class="table">
                    <tr><th style="width:80px">序</th><th>图片</th><th style="width:100px">时间</th></tr>
                    <tr v-for="(item,index) in dialog.data.userFiles" :key="index">
                      <td>{{(index+1)}}</td>
                      <td>
                          <el-image  v-for="(img,index2) in item.imagesConvert" :key="index2" :src="img" :preview-src-list="[img]" style="width:50px;height:50px"></el-image>
                      </td>
                      <td>{{item.createTime | parseTime}}</td>
                    </tr>
                    <tr v-if="dialog.data.userFiles.length==0">
                        <td colspan="3">尚未提交补充资料</td>
                    </tr>
                </table>
            </span>
          </div>
          <div class="item hauto">
            <span class="name">商家</span>
            <span class="value">
                <table style="width:100%" class="table">
                    <tr><th style="width:80px">序</th><th>图片</th><th style="width:100px">时间</th></tr>
                    <tr v-for="(item,index) in dialog.data.shopFiles" :key="index">
                      <td>{{(index+1)}}</td>
                      <td>
                          <el-image  v-for="(img,index2) in item.imagesConvert" :key="index2" :src="img" :preview-src-list="[img]" style="width:50px;height:50px"></el-image>
                      </td>
                      <td>{{item.createTime | parseTime}}</td>
                    </tr>
                    <tr v-if="dialog.data.shopFiles.length==0">
                        <td colspan="3">尚未提交补充资料</td>
                    </tr>
                </table>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialog.visible=false">关闭</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as orderApi from '@/api/orders'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'
import { getKindList2 } from '@/api/kekind'

export default {
  name: 'RefundActivitysShop',
  components: { Pagination},
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        // page: 1,
        // rows: 20,
        id:''
      },
      search:{
      },
      dialog:{
        visible:false,
        saveloading:false,
        data:{
          id:'',
          userFiles:[],
          shopFiles:[]
        }
      }
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  computed:{
    
  },
  filters:{
      parseUserRole(val){
          return enumHelper.user.userRole.getName(val);
      },
      parseActivityType(val){
          return enumHelper.refund.activityType.getName(val);
      }
  },
  methods: {
    getList(){
      var that=this;
      const id = that.$route.params && that.$route.params.id
      that.listLoading = true;
      that.listQuery.id=id;
      orderApi.getRefundActivitys(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.map((item,index)=>{
              item._id=index+1;
              item.pictrues=(item.images || '').split(',').map(o=>{
                  return imageHelper.GetFullUrl(o,200,200);
              });
              item.pictruesLarge=(item.images || '').split(',').map(o=>{
                  return imageHelper.GetFullUrl(o,700,700);
              });
              if(!item.pictrues[0]){item.pictrues=[]}
              return item;
            })];
            that.listLoading = false;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.getList();
    },
    btnArbitrateShowState(val){
      return [
        enumHelper.refund.activityType.shoparbitrate,
        enumHelper.refund.activityType.userarbitrate,
        enumHelper.refund.activityType.systemautoarbitrate,
      ].indexOf(val)>-1
    },
    //补充资料展示
    showArbitrateExt(id){
      var that=this;
      that.dialog.data.userFiles.splice(0,that.dialog.data.userFiles.length);
      that.dialog.data.shopFiles.splice(0,that.dialog.data.shopFiles.length);
      that.dialog.visible=true;
      orderApi.getCredentialForArbitrate({id:id}).then(res=>{
        if(res.data){
           var list1=res.data.filter(obj=>obj.userRole==enumHelper.user.userRole.normal);
           var list2=res.data.filter(obj=>obj.userRole==enumHelper.user.userRole.shop);
          that.dialog.data.userFiles.push(...list1.map(obj=>{
            obj.imagesConvert=obj.images.split(',').map(img=>{
              return imageHelper.GetFullUrl(img,200,200);
            })
            return obj;
          }))
          that.dialog.data.shopFiles.push(...list2.map(obj=>{
            obj.imagesConvert=obj.images.split(',').map(img=>{
              return imageHelper.GetFullUrl(img,200,200);
            })
            return obj;
          }))
        }
      });
    }
    
  }
}
</script>
<style scoped>
table.table{ table-layout: fixed;}
 table.table>tr:nth-child(2n){
    background: #f1f1f1;
 }
 table.table>tr:nth-child(2n-1){
    background: #e1e1e1;
 }
 table.table>tr>td{text-align: center;}
</style>
